<template>
  <div class="main">
    <div class="banner-wrap">
      <!-- <img src="@/assets/images/banner1.jpg" class="banner-img"> -->
      <swiper :list="bannerList" height="3.2rem" :show-desc-mask="false" :loop="true" :auto="true" :threshold="15" dots-position="center" :min-moving-distance="30"></swiper>
    </div>

    <div class="menu-wrap">
      <grid v-for="(item, idx) in menu" :key="idx" :show-lr-borders="false" :show-vertical-dividers="false" class="m-grid">
        <grid-item v-for="(item1, idx2) in item" :key="idx2" @on-item-click="navTo(item1)" class="m-item">
          <div class="m-img-wrap">
            <img v-if="item1.img" :src="item1.img" :class="'m-img'+(3*idx+idx2)">
          </div>
          <div class="m-txt m-txt2" v-if="item1.line == 2">{{item1.lab}}<br />{{item1.lab2}}</div>
          <div class="m-txt ell" v-else :class="[{'lh': idx == 0}]">{{ item1.lab }}</div>
        </grid-item>
      </grid>
    </div>
    <div class="lines"></div>

    <my-marquee class="marquee-bottom"></my-marquee>

    <div class="wx-modules">
      <div class="wx-title">
        <div class="left">
          <img src="@/assets/home/wxtitle.png" alt="">
        </div>
        <div class="right">
          <span>平台将在志愿填报服务期间由专业人员为VIP考生免费提供志愿填报相关问题的咨询。</span>
          <div class="time">时间：每日上午8:30 — 晚上10:00</div>
        </div>
      </div>
      <div class="wx-body">
        <div class="item">
          <div class="item-boy">
            <img class="image" src="@/assets/home/wx2.png" alt="">
            <div>吴老师</div>
            <div class="tel"><i><img class="image" src="@/assets/home/tell.png" alt=""></i><span>17606740166</span></div>
          </div>
        </div>
        <div class="item">
          <div class="item-boy right">
            <img class="image" src="@/assets/home/wx30.jpg" alt="">
            <div>卢老师</div>
            <div class="tel"><i><img class="image" src="@/assets/home/tell.png" alt=""></i><span>13056743306</span></div>
          </div>
        </div>

        <div class="item">
          <div class="item-boy">
            <img class="image" src="@/assets/home/wx1.png" alt="">
            <div>黄老师</div>
            <div class="tel"><i><img class="image" src="@/assets/home/tell.png" alt=""></i><span>13306680668</span></div>
          </div>
        </div>

        <div class="item">
          <div class="item-boy right">
            <img class="image" src="@/assets/home/wx4.png" alt="">
            <div>童老师</div>
            <div class="tel"><i><img class="image" src="@/assets/home/tell.png" alt=""></i><span>13306747930</span></div>
          </div>
        </div>
      </div>
      <div class="wx-about">
        温馨提示：志愿填报期间可能会涉及到电话忙音及微信回复
        延后敬请原谅！
      </div>
    </div>

    <div class="lines"></div>

    <div class="news-wrap">
      <div class="news-header">
        <img src="@/assets/images/i_new.png" class="i-news" />
        <span>高考资讯</span>
        <span @click="$router.push('/new/more')" style="float: right;margin-right: 15px;color: #aaa;cursor: pointer;">更多</span>
      </div>
      <div class="new-body">
        <div @click="$router.push({name: 'newsDetail', params: {id: item.id}})" v-for="(item, index) in newsList" :key="index" class="item-list">
          <div class="lefts"><img class="" :src="item.pic" alt=""></div>
          <div class="rights">
            <div class="right-bodys">
              <span class="titles">{{item.title}}</span>
              <span class="abouts">{{item.brief}}</span>
              <div class="counts">
                <i class="iconfont icon-yanjing1"></i>
                <span>{{item.visitsNumber}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-transfer-dom>
      <confirm v-model="buyConfirmShow" :hide-on-blur="true" @on-confirm="onConfirm">
        <p style="text-align:center;">{{ buyText }}</p>
      </confirm>
    </div>

    <div v-transfer-dom>
      <confirm v-model="reviewConfirmShow" class="c-confirm" :show-cancel-button="false" :hide-on-blur="true" @on-confirm="onReviewConfirm">
        <p style="text-align:center;">{{ confirmTxt }}</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import Utils from '@/common/utils.js'
import Api from '@/api/index.js'
import { Confirm, Group, Cell, Grid, GridItem, Swiper, TransferDomDirective as TransferDom } from 'vux'
import myMarquee from '@/components/marquee'
export default {
  directives: {
    TransferDom
  },
  components: {
    Confirm,
    Group,
    Cell,
    Grid,
    GridItem,
    myMarquee,
    Swiper
  },
  data() {
    return {
      bannerList: [
        // {
        //   url: '/goods?t=banner',
        //   img: require('../assets/home/jb-h5-b-1.png'),
        //   title: '',
        //   query: 'banner'
        // },
        {
          url: '/service',
          img: require('../assets/home/jb-h5-b-2.png'),
          title: ''
        }
      ],
      menu: [
        [{
          lab: '志愿查询系统',
          img: '/static/images/i_query.png',
          url: 'query/sp/1',
          name: 'queryStep1'
        }, {
          lab: '志愿智能辅助报告',
          img: '/static/images/i_report.png',
          url: '',
          name: 'report'
        }, {
          lab: '线上线下名师一对一',
          lab2: '名师一对一',
          img: '/static/images/i_teacher.png',
          line: 0,
          url: '',
          name: 'oneByOne'
        }],
        [{
          lab: '院校招生计划',
          img: '/static/images/i_plan_query.png',
          url: 'plan/query',
          name: 'planQuery'
        }, {
          lab: '院校/专业排行榜',
          img: '/static/images/i_ranking.png',
          url: 'ranking',
          name: 'rankingIndex'
        },
        {
          lab: '',
          img: '',
          url: '',
          name: ''
        }
          // , {
          //   lab: '在线课程',
          //   img: '/static/images/i_course_online.png',
          //   url: '',
          //   name: 'courseOnline'
          // }
        ]
      ],
      newsList: [],
      userData: null,
      buyConfirmShow: false,
      buyName: null,
      buyText: '',
      reviewConfirmShow: false,
      confirmTxt: '该功能目前只能在PC端查看'
    }
  },
  created() {
    this.userData = Utils.local('userData')
    if (this.userData && this.userData.sex === 2) {
      this.$router.push({ name: 'mineUserInfo', meta: { r: 'home' } })
    }
    this.getNewsAll();
    let isLogin = localStorage.getItem('loginCount');
    if (!isLogin) {
      setTimeout(() => {
        localStorage.removeItem('userData');
        localStorage.removeItem('accesstoken');
      }, 500);
    }
  },
  methods: {
    navTo(item) {
      if (!item.img) return;
      let that = this
      // 检查是否登录
      if (!that.userData.accesstoken) {
        // 未登录提示并要求登录
        that.$vux.toast.show({
          text: '请先登录，再进行操作',
          type: 'text',
          width: '80%'
        })
        that.$router.push({ name: 'login' })
        return
      }
      if (['queryStep1', 'planQuery'].includes(item.name) && this.userData.isLT == 0) {
        this.$vux.alert.show({
          content: `您的手机号码非联通号码，需购买vip套餐`,
          buttonText: '确定',
          maskZIndex: 100,
          onHide() {
            that.$router.push({ name: 'goodsPay' });
          }
        })
        return;
      }
      if (item.name === 'queryStep1') {
        if (!that.userData.examType) {
          // 未填写成绩提示并跳转填写成绩页面
          that.$vux.toast.show({
            text: '请先填写成绩，再进行操作',
            type: 'text',
            width: '80%'
          })
          that.$router.push({ name: 'scoreRank', query: { redirect: 'home' } })
          // } else if (that.userData.isCommonPay) {
          //   that.$router.push({name: item.name})
          // } else if (!that.userData.isCommonPay && that.userData.type === 102) {
          //   that.buyConfirmShow = true
          //   that.buyText = `您还没有购买${item.lab}，现在购买`
          // } else if (!that.userData.isCommonPay) {
          //   that.buyConfirmShow = true
          //   that.buyText = `您购买的${item.lab}已过期，请重新购买`
        } else {
          if (that.userData.type == 102 && that.userData.searchStatus == 0) {
            this.$vux.alert.show({
              content: `体验权限已失效，请购买VIP`,
              buttonText: '好的，我知道了',
              maskZIndex: 100,
              onHide() {
                that.$router.push({ name: 'goodsPay' });
              }
            })
            return;
          }
          that.$router.push({ name: item.name })
        }
      } else if (item.name === 'planQuery') {
        that.$router.push({ name: item.name })
      } else if (item.name === 'rankingIndex') {
        that.$router.push({ name: item.name })
      } else if (item.name === 'courseOnline' || item.name === 'oneByOne') {
        that.confirmTxt = '正在建设中, 敬请期待'
        that.reviewConfirmShow = true
      } else if (that.userData.isCommonPay || that.userData.isReportPay) {
        that.confirmTxt = '该功能目前只能在PC端查看'
        that.reviewConfirmShow = true
      } else {
        that.buyConfirmShow = true
        that.buyText = item.name == 'report' ? '智能辅助报告更加精准助力您的志愿填报！请购买后使用。' : `您还没有购买${item.lab}，现在购买`
        that.buyName = item.name
      }
    },
    getNewsAll() {
      let that = this
      Api.getNewsAll({ page: 1, pageSize: 10 }).then(res => {
        if (res.code === 20000) {
          that.newsList = res.data.array;
        }
      })
    },
    // 跳转新闻详情页面
    gotoNewsDetail(id) {
      this.$router.push({ name: 'newsDetail', params: { id: id } })
    },
    onConfirm(msg) {
      if (this.buyName === 'report') {
        this.$router.push({ name: 'goodsPay', query: { t: 'report' } })
      } else {
        this.$router.push({ name: 'goodsPay' })
      }
    },
    onReviewConfirm() {
      this.reviewConfirmShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.lines {
  height: 20/75rem;
  background-color: #f2f2f2;
}
.wx-modules {
  padding: 14/75rem 10/75rem;
  .wx-title {
    display: flex;
    .left {
      img {
        width: 60/75rem;
        height: 42/75rem;
      }
    }
    .right {
      flex: 1;
      font-size: 26/75rem;
      color: #555;
      .time {
        color: #999;
      }
    }
  }
  .wx-about {
    color: #ff0000;
    padding: 0 30/75rem;
  }
  .wx-body {
    padding: 20/75rem 130/75rem;
    padding-bottom: 0;
    display: flex;
    width: 100%;
    height: auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
      width: 50%;
      margin-bottom: 20/75rem;
      .item-boy {
        float: left;
        text-align: center;
        .image {
          width: 188/75rem;
          height: 188/75rem;
          margin-bottom: 6/75rem;
        }
        .tel {
          display: flex;
          justify-content: center;
          margin-top: 10/75rem;
          i {
            background-color: #ff8600;
            height: 25/75rem;
            border-radius: 6/75rem;
            padding: 3/75rem;
            padding-top: 2/75rem;
            margin-right: 10/75rem;
            img {
              height: 20/75rem;
              width: 20/75rem;
            }
          }
        }
      }
      .right {
        float: right;
      }
    }
  }
}

.banner-wrap {
  .vux-icon-dot {
    width: 0.213333rem /* 8/37.5 */ !important;
    height: 0.213333rem /* 8/37.5 */ !important;
    border-radius: 50% !important;
    &.active {
      background-color: #ff8600 !important;
    }
  }
}

.banner-wrap {
  width: 100%;
  .banner-img {
    width: 100%;
  }
}
.menu-wrap {
  // border-bottom: 1px solid #ccc;
  padding-top: 0.266667rem;
  padding-bottom: 0.12rem;
  .m-grid {
    &:after,
    &:before {
      border-top: none !important;
    }
  }
  .m-item {
    padding: 0 0 0.133333rem;
    &:after {
      border: none;
    }
    .m-img-wrap {
      height: 1.333333rem;
      text-align: center;
      line-height: 1.333333rem;
      img {
        vertical-align: middle;
        width: 1.253333rem /* 47/37.5 */;
        height: 1.253333rem /* 47/37.5 */;
      }
    }
    .m-txt {
      margin-top: 0.16rem /* 6/37.5 */;
      font-size: 13px;
      color: #999;
      text-align: center;
      line-height: 0.6rem;
    }
    .m-txt2 {
      font-size: 13px;
      line-height: 0.426667rem /* 16/37.5 */;
    }
  }
}
.marquee-bottom {
  border-bottom: 1px solid #f2f2f2;
}
.new-body {
  width: 100%;
  padding: 0 20/75rem;
  padding-top: 20/75rem;
  font-size: 26/75rem;
  .item-list {
    padding: 20/75rem 0;
    color: #666;
    display: flex;
    border-top: 1px solid #eee;
    .lefts {
      margin-right: 20/75rem;
      img {
        width: 200/75rem;
        height: 150/75rem;
        border-radius: 5/75rem;
      }
    }
    .rights {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .right-bodys {
        width: 100%;
        display: flex;
        flex-direction: column;
        .titles {
          height: 40/75rem;
          color: #333;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .newline {
          line-height: 40/75rem;
          -webkit-box-orient: vertical;
          width: 100%;
        }
        .abouts {
          // h-70 newline c-999 line-2
          height: 70/75rem;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
        }
        .counts {
          height: 40/75rem;
          color: #aaa;
          display: flex;
          justify-content: flex-end;
          margin-top: 10/75rem;
          align-items: center;
          span {
            margin-left: 10/75rem;
          }
        }
      }
    }
  }
}
.news-wrap {
  .news-header {
    font-size: 14px;
    color: #333;
    padding-left: 0.4rem;
    padding-top: 0.266667rem;
    padding-bottom: 1px;
    .i-news {
      vertical-align: middle;
      width: 0.48rem;
    }
    span {
      vertical-align: middle;
    }
  }
}
</style>
